<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选项卡切换页面结构</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        #outer {
            width: 606px;
            margin: 0 auto;
            border: 1px solid #2ba5eb;
        }

        #title {
            overflow: hidden;
        }

        #title>h3 {
            width: 200px;
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #333;
            float: left;
        }
        #con>li {
            width: 606px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            font-weight: bold;
            display: none;
        }

        #title>.active {
            background-color: red;
            color: #fff;
        }

        #con>.show {
            display: block;
        }
    </style>

</head>

<body>
    <div id="outer">
        <div id="title">
            <h3 class="active">标题一</h3>
            <h3>标题二</h3>
            <h3>标题三</h3>
        </div>
        <ul id="con">
            <li class="show">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>

    <script>
        var oTitle = document.getElementById("title");
        var oCon = document.getElementById("con");
        var oH3s = oTitle.getElementsByTagName("h3");
        var oLis = oCon.getElementsByTagName("li");
        // 外层这个for循环仍然是只绑定点击事件用的
        for (var i = 0; i < oH3s.length; i++) {
            // 这句话借用了 绑定事件的for循环，我们就可以少书写一个for循环
            oH3s[i].index = i;
            oH3s[i].onclick = function () {
                // 里边这个for循环 仅仅是遍历所有的h3和li 然后清空样式
                for (var i = 0; i < oH3s.length; i++) {
                    oH3s[i].className = "";
                    oLis[i].className = "";
                }
                this.className = "active";
                // this这个元素是它父级中的下标为几，那么oLis的下标就是几
                oLis[this.index].className = "show";
            }
        }
    </script>
</body>

</html>